<template>
  <div class="person">
    <h2>姓名：{{ name }}</h2>
    <h2>年龄：{{ age+1 }}</h2>
    <h2>座驾：{{ car }}</h2>
  </div>
</template>

<script>
  export default {
    name:'Person',
    // 第一种接收方式：只接收
    props:['name','age','car'],

    // 第二种接收方式：接收 + 限制数据类型
    /* props:{
      name:String,
      age:Number,
      car:Object
    } */

    // 第三种接收方式：接收 + 限制数据类型 + 限制必要性 + 指定默认值
    /* props:{
      name:{
        type:String,
        required:false,
        default:'张三'
      },
      age:{
        type:Number,
        required:true,
        default:89
      },
      car:{
        type:Object,
        required:true,
        default(){
          return {brand:'柯尼塞格',price:99.99}
        }
      },
    } */
  }
</script>

<style scoped>
  .person {
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: skyblue;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px;
  }
</style>